<%@ page language="java" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.10.2.min.js">
	
</script>
<script type="text/javascript">
	function cngItem(itmId, oper) {
		var item = $("#" + itmId);
		var cnt = parseInt(item.val());
		if ("add" == oper) {
			item.val(cnt + 1);
		} else if ("mns" == oper) {
			if (cnt > 0) {
				item.val(cnt - 1);
			}
		}
	}
	
	function placeOrder(){
		if($("#buyerNm").val() == ''){
			alert("名字要输")
		}
		if($("#buyerTel").val() == ''){
			alert("手机号要输")
		}
		var fm = $("#fm");
		var itemBox = $("#itemBox");
		var items = itemBox.find("input");
		//组json
		var theJson = [];
		for(var i = 0; i < items.length; i ++){
			if(items[i].value != "0"){
				theJson.push({"itmId":items[i].id, "itmCnt":items[i].value})
			}
		}
		if(theJson.length == 0){
			alert("嘤嘤嘤~买点东西吧");
			return;
		}
		var theJsonStr = JSON.stringify(theJson);
		var itms=$("<input hidden type='text' name='itms'/>");  
		itms.attr("value",theJsonStr);
		
		fm.append(itms);
		fm.submit();
	}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>蛋壳跨境电商-下单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<img style="width:50px;height:50px" src="http://oim8ighi5.bkt.clouddn.com/test.jpg">
	<form id="fm" action="/EggShell/express" method="post"
		enctype="application/x-www-form-urlencoded">
		<table>
			<tr>
				<th>客户</th>
				<th>手机</th>
				<th>客源</th>
			</tr>
			<tr>
				<td><input required="required" style="width: 200px" name="buyerNm" id="buyerNm" placeholder="昵称"/></td>
				<td><input required="required" style="width: 150px" name="buyerTel" id="buyerTel" placeholder="手机号"/></td>
				<td><select style="width: 100px" name="buyerSrc">
						<option value="1">叶小叶</option>
						<option value="0">小辣椒</option>
						<option value="2">顾小顾</option>
				</select></td>
				<td><input onclick="placeOrder()" type="button" value="下单" /></td>
			</tr>
		</table>
	</form>
	<br>
	<table>
		<tr>
			<th>本次清单</th>
		</tr>
		<tr />
		<tr />
		<tr />
		<tr />
		<tr>
			<td id="itemBox"><c:forEach items="${allItems}" var="item">
					<div style="float: left; width: 230px">
						<label>${item.itmNm}</label>
					</div>&nbsp;&nbsp;x
						<input id="${item.itmId}" style="width: 40px; text-align: center"
						value="0" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<button style="width: 40px"
						onclick="cngItem('${item.itmId}', 'mns')">-</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<button style="width: 40px"
						onclick="cngItem('${item.itmId}', 'add')">+</button>
					<br>
					<br>
				</c:forEach></td>
		</tr>
	</table>
</body>
</html>